<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]">
        <!-- tab -->
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="合规报告">
            <ComplianceReporting />
          </a-tab-pane>
          <a-tab-pane key="2" title="关联资产">
            <RelatedAssets :data="asset_package_data"/>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </PageMain>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import ComplianceReporting from './compliance_reporting.vue';
import RelatedAssets from './related_assets.vue';
import * as api from '@/api/compliance_registration/register_compliance/register_compliance'
const route = useRoute();

const currentId = ref(route.query.id);

const asset_package_data = ref({}); // 关联资产数据

/* 获取详情数据 */
const getDetailData = async () => {
  let params = {
    id: currentId.value
  }
  const res = await api.comRegDetail(params);
  asset_package_data.value = res.data.asset_package_data;
}

onMounted(() => {
  getDetailData();
})
</script>

<style lang="less" scope>
.arco-tabs-nav-type-line .arco-tabs-tab{
  margin: 0 20px 0 0;
}
.arco-tabs-content{
  padding: 0;
}
</style>